<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/mui.css"/>
    <link rel="stylesheet" type="text/css" href="font1218/iconfont.css" />

    <script src="script/jquery.3.2.1.min.js"></script>
    <script src="script/swiper.min.js"></script>
    <script src="script/echarts.js"></script>
    <script src="script/index_ech.js"></script>
    <script src="script/index.js"></script>
</head>
<body>

<div class="z-body">
    <!--echart-->
    <header>
        <a href="address.html">
            <div id="map"></div>
            <div class="hea-content">
                <p>阿萨德提交了新的订单</p>
                <p>杨*宇提交了新的订单</p>
            </div>
        </a>

        <!--搜索开始-->
        <div class="section">
            <form action="#">
                <input placeholder="搜索食物、地区名称" type="text" name="" id="">
            </form>
        </div>

    </header>
    <!--内容-->
    <div class="content">
        <ul class="con-top" style="margin:.2rem 0;width:100%;">
            <li>
                <img src="images/laba.png" alt="">
            </li>
            <li>公告</li>
            <div id="box">
                <ul id="con1" onMouseOut="Up()" onMouseOver="Stop()">
                    <li><a href="#" >文章标题文章标题文章标题</a></li></br>
                    <li><a href="#">文章标题文章标题文章标题</a></li></br>
                    <li><a href="#">文章标题文章标题文章标题</a></li></br>
                    <li><a href="#">文章标题文章标题文章标题</a></li></br>
                    <li><a href="#">文章标题文章标题文章标题</a></li></br>
                    <li><a href="#">文章标题文章标题文章标题</a></li></br>
                    <li><a href="#">文章标题文章标题文章标题</a></li></br>
                    <li><a href="#">文章标题文章标题文章标题</a></li></br>
                </ul>
                <ul id="con2"></ul>
            </div>
            <li style="float:left;font-size:.2rem;">&nbsp;&nbsp;&nbsp;&gt;</li>
            <div class="con-center">
                <a href="address.html">
                    <img src="images/view01.jpg" alt="">
                </a>
                <p>云南-玉溪</p>
                <span>热门</span>
            </div>
            <div class="con-bottom">
                <dl>
                    <dt>文章标题文章标题文章标题</dt>
                    <dd>2017-10-01</dd>
                    <div>
                        <p class="lefts">
                            <span>1698</span>
                        </p>
                        <p class="rights">

                            <a href="javascript:;">
                                <i id="dianzan" style="font-size:.5rem;color:#000;display: inline-block" class="mui-icon iconfont icon-dianzan">1000</i>
                            </a>
                            <span>1000</span>
                        </p>
                    </div>
                </dl>
            </div>
            <div class="con-foo">
                <dl class="con-foo-dl">
                    <a href="article.html">
                        <dt>
                        <div>
                            <img src="images/useInf.png" alt="">
                        </div>
                        <p>杰森</p>
                        </dt>
                        <dd>
                            写得很好写得很好写得很好写得很好写得很好写得很好写得很好.
                        </dd>
                    </a>
                </dl>
            </div>
    </div>


    <div class="scroll-box" style="overflow: scroll">
        <ul class="scroll-inset">
            <li><img class="five" style="width:100%;" src="images/5元.png" alt=""/></li>
            <li><img class="ten" style="width:100%;" src="images/10green.jpg" alt=""/></li>
            <li><img class="Twenty" style="width:100%;" src="images/20元.png" alt=""/></li>
            <li><img class="five" style="width:100%;" src="images/5元.png" alt=""/></li>
            <li><img class="ten" style="width:100%;" src="images/10green.jpg" alt=""/></li>
            <li><img class="Twenty" style="width:100%;" src="images/20元.png" alt=""/></li>
        </ul>
    </div>



    <!--list秒杀-->
    <h4 class="list-title">标题组件</h4>
    <div class="list">
        <ul class="list-box">
            <li class="list-box-top">
                <a href="changgui-index.html">
                    <img src="images/qiang-inner01.png" alt="">

                    <div class="list-position">
                        <div class="time">
                            距开始：<span>00</span>：<span>00</span>：<span>00</span>
                        </div>
                        <p>文本标签文本标签文本标签文本标签</p>
                        <div class="time-next">
                            <span>￥99.99</span>
                            <span>2人团</span>
                        </div>
                    </div>
                </a>
            </li>
            <li class="list-box-bot">
                <a href="changgui-index.html">
                    <dl>
                        <dt>文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签</dt>
                        <dd class="guanzhu">
                            <a style="font-size:.8rem;margin-top:.2rem;" href="javascript:;" class="mui-pull-right  cus-iconsfont mui-icon iconfont icon-aixin2"></a>
                        </dd>
                    </dl>
                </a>
            </li>
        </ul>
        <ul class="list-box">
            <li class="list-box-top">
                <a href="miaosha-index.html">
                    <img src="images/view01.jpg" alt="">

                    <div class="list-position">
                        <div class="time">
                            距开始：<span>00</span>：<span>00</span>：<span>00</span>
                        </div>
                        <p>文本标签文本标签文本标签文本标签</p>
                        <div class="time-next">
                            <span>￥99.99</span>
                            <span>限2人购</span>
                        </div>
                    </div>
                </a>
            </li>
            <li class="list-box-bot">
                <a href="miaosha-index.html">
                    <dl>
                        <dt>文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签</dt>
                        <dd class="guanzhu">
                            <a style="font-size:.8rem;margin-top:.2rem;" href="javascript:;" class="mui-pull-right  cus-iconsfont mui-icon iconfont icon-aixin2"></a>
                        </dd>
                    </dl>
                </a>
            </li>
        </ul>
        <ul class="list-box">
            <li class="list-box-top">
                <a href="tuan-index.html">
                    <img src="images/qiang-inner01.png" alt="">

                    <div class="list-position">
                        <div class="time">
                            距开始：<span>00</span>：<span>00</span>：<span>00</span>
                        </div>
                        <p>文本标签文本标签文本标签文本标签</p>
                        <div class="time-next">
                            <span>￥99.99</span>
                            <span>2人团</span>
                        </div>
                    </div>
                </a>
            </li>
            <li class="list-box-bot">
                <a href="tuan-index.html">
                    <dl>
                        <dt>文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签</dt>
                        <dd class="guanzhu">
                            <a style="font-size:.8rem;margin-top:.2rem;" href="javascript:;" class="mui-pull-right  cus-iconsfont mui-icon iconfont icon-aixin2"></a>
                        </dd>
                    </dl>
                </a>
            </li>
        </ul>
    </div>
    <!--商品-->
    <ul class="goods-box">
        <li class="goods">
            <div class="g-top">
                <a href="article.html">
                    <img src="images/view01.jpg" alt="">
                </a>
                <dl>
                    <dt>单列商品单列商品单列商品单列商品单列商品</dt>
                    <dd>
                        <span>包邮</span>
                        <span>包退</span>
                    </dd>
                    <p>
                        <span>云南</span>
                        <span>玉溪</span>
                    </p>
                    <div>￥99.99</div>
                </dl>
            </div>
            <div class="g-bottom">
                <p>文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文</p>
                <dd class="guanzhu">
                    <a style="font-size:.8rem;margin-top:.2rem;" href="javascript:;" class="mui-pull-right  cus-iconsfont mui-icon iconfont icon-aixin2"></a>
                </dd>
            </div>
        </li>
    </ul>

    <!--图片列表-->
    <div class="foo-image">
        <div class="image1">
            <a href="">
                <img src="images/banner-img.jpg" alt="">
            </a>
            <div class="image2">
                <a href="">
                    <img src="images/pro-list-item01.png" alt="">
                </a>
                <a href="">
                    <img src="images/pro-list-item02.png" alt="">
                </a>
            </div>
        </div>
        <!--<div class="image2">
            <a href="">
                <img src="images/pro-list-item01.png" alt="">
            </a>
            <a href="">
                <img src="images/pro-list-item02.png" alt="">
            </a>
        </div>-->

    </div>
    <div class="image3">
        <a href="">
            <img src="images/swiper-slide1.jpg" alt="">
        </a>
        <a href="">
            <img src="images/swiper-slide2.jpg" alt="">
        </a>
    </div>






    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            slidesPerView: 3,
            paginationClickable: true,
            spaceBetween: 80,
            freeMode: true
        });
    </script>




    <!--轮播-->
    <div class="banner" style="margin:0;">
        <div class="swiper-container banner-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="">
                        <img src="images/banner.png" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="">
                        <img src="images/banner.png" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="">
                        <img src="images/banner.png" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="">
                        <img src="images/banner.png" alt="">
                    </a>
                </div>
            </div>
        </div>

    </div>




    <div class="nav-box">
        <p>还没扯够吗？</p>
        <ul class="nav">
            <li class="nav-active" class="nav-one">
                <a href="#">
                    <div><img src="images/lvfoo1.png" alt=""></div>
                    <p>精选</p>
                </a>
            </li>
            <li class="nav-tw">
                <a href="guang.html">
                    <div><img src="images/baifoo2.png" alt=""></div>
                    <p>逛街社区</p>
                </a>
            </li>
            <li class="nav-thr">
                <a href="My-personal.html">
                    <div><img src="images/baifoo3.png" alt=""></div>
                    <p>我的</p>
                </a>

            </li>
        </ul>
        <div class="nav-fixed">
            <img src="images/shounahe.png" alt="">
        </div>
    </div>

    <script>
        $(".nav li.nav-one").click(function(){
            alert(0);
            $(this).attr("class","nav-active");
            $(".nav li a div img").attr("src","images/lvfoo1.png");
        });
        $(".nav li.nav-tw").click(function(){
            alert(0);
            $(this).attr("class","nav-active");
            $(".nav li a div img").attr("src","images/lvfoo2.png");
        });
        $(".nav li.nav-thr").click(function(){
            alert(0);
            $(this).attr("class","nav-active");
            $(".nav li a div img").attr("src","images/lvfoo3.png");
        });
    </script>



    <!--z-body END-->
</div>

<script>




    /* 关注的点击效果  */
    $(".guanzhu a").click(function(){

        if($(this).hasClass('active')){
            $(this).attr('class','mui-pull-right cus-iconsfont mui-icon iconfont icon-aixin2');
        }else{
            $(this).attr('class','active mui-pull-right cus-iconsfont mui-icon iconfont icon-aixin2');
        }
    });

    /* 点赞  */
    $("#dianzan").click(function(){
        $(this).css({'color':'#fea801'},{'background':'#000'});
    });


    /*  优惠券  */
    var num = 1;
    $(".five").click(function(){
        if(num > 1 ){

            return;
        }
        $(this).attr("src","images/5已领取.jpg");
        num++;
    });

    $(".ten").click(function(){
        if(num > 1 ){
            ;
            return;
        }
        $(this).attr("src","images/10元.png");
        num++;
    });
    $(".Twenty").click(function(){
        if(num > 1 ){

            return;
        }
        $(this).attr("src","images/20333.jpg");
        num++;
    });

</script>


<script type="text/javascript">
    /*  滚动新闻开始 */
    var box=document.getElementById("box");
    var con1=document.getElementById("con1");
    var con2=document.getElementById("con2");
    var s=document.getElementsByTagName("a");
    var speed=100;
    con2.innerHTML=con1.innerHTML;
    function  ScrollUp(){
        if( box.scrollTop>=con1.scrollHeight){
            box.scrollTop=0;
        }else
            box.scrollTop++;
    }
    var i=setInterval("ScrollUp()",speed);
    function Stop(){
        clearInterval(i);
    }
    function Up(){
        i=setInterval("ScrollUp()",speed);
    }
    /*  滚动新闻结束 */

</script>





</body>
</html>